<template>
	<view class="container">
		<!-- 轮播 -->
		<swiper indicator-dots autoplay :indicator-dots="false" class="swiper">
		  <swiper-item v-for="(item, index) in imgList" :key="index">
			<image :src="item"></image>
		  </swiper-item>
		</swiper>
		<!-- 报名列表 -->
		<view class="enroll">
			<!-- 导航 -->
			<!-- <view class="nav">
				<view class="navItem" @click="bindList">
					<image :src="url+navImg1" mode="" class="img"></image></br>
					野客活动
				</view>
				<i class="leftB"></i>
				<view class="navItem" @click="bindShop">
					<image :src="url+navImg2" mode="" class="img"></image></br>
					野客商城
				</view>
			</view> -->
			<!-- <view class="gg" v-if="info">
				<view class="notice-container">
				    <view class="notice-content">
				      {{info.title}}
				    </view>
				  </view>
			</view> -->
			<!-- 会员广告栏 -->
			<swiper indicator-dots autoplay :indicator-dots="false" class="hdbg">
			  <swiper-item v-for="(item, index) in hdbgList" :key="index" @click="handleHyxq(item.id)">
				<image :src="item.image"></image>
			  </swiper-item>
			</swiper>
			<!-- 广告栏轮播图 -->
			<swiper indicator-dots autoplay :indicator-dots="false" class="swiper2" v-if="hyGgList.length>0">
			  <swiper-item v-for="(item, index) in hyGgList" :key="index">
				<image :src="url+item.image" v-if="item.switch==1" @click="handleAppid(item.appid)"></image>
				<image :src="url+item.image" v-if="item.switch==0" @click="handleGgxq(item.id)"></image>
			  </swiper-item>
			</swiper>
		</view>
		<!-- 活动报名 -->
		<view class="ykBox">
			<view class="ykTitle">
				<image :src="url+topImg" mode="" @click="bindList"></image>
			</view>
			<waterfall ref='waterfall' :list='imgArr' @customEvent="handleEvent"></waterfall>
			<view v-if="!hasMore" class="hasMore">没有更多数据了</view>
		</view>
	</view>
</template>

<script>
 
import waterfall from '@/components/TPlus-waterfall/TPlus-waterfall.vue';
import { bannerList,hdList,shopList,gethdbgList } from '@/api/api.js'
import { memberL } from '@/api/member.js'
import config from '@/config'
export default {
	components: { waterfall },
	data() {
		return {
			url:config.baseUrl,
			topImg:"/uploads/web/ykimg1.png",
			navImg1:"/uploads/web/tb.png",
			navImg2:"/uploads/web/sc.png",
			imgArr: [], //  需要再次加载的图片数组
			imgList:[],
			hdbgList:[],
			hyGgList:[],
			num:'100',
			page: 1, // 当前页数
			pageSize: 10, // 每页条数
			hasMore: true, // 是否有更多数据
			info:{},
			pullUpCount:""
		};
	},
	onLoad: function() {
		// this.getNotice();
		this.loadImages(); //首次加载图片
		this.banner();
		this.memberList();
		this.ggList();
	},
	mounted() {},
	// onShow() {
	//     // 每次进入页面时初始化
	//     if (!this.isInitialized || !this.imgArr.length) {
	// 		console.log('this.isInitialized',this.isInitialized)
	// 		console.log('初次')
	//       this.loadImages()
	//     }
	//   },
	methods: {
		
		// 加载列表数据
		// getList(){
		// 	let data = {
		// 		page:this.page,
		// 		pageSize:this.pageSize
		// 	}
		// 	hdList(data).then((res) => {
		// 		if(res.code==200){
		// 			this.imgArr = res.data
		// 			console.log('2323',this.imgArr)
		// 			console.log('this.imgArr',this.imgArr)
		// 			if(res.data.length>0){
		// 				this.hasMore = true
		// 			}else{
		// 				this.hasMore = false
		// 			}
		// 			for (let i = 0; i < this.imgArr.length; i++) {
		// 				this.imgArr[i].price = this.imgArr[i].price.replace(/\.00$/, '');
		// 				this.imgArr[i].src = this.imgArr[i].image;
		// 			} 
		// 			uni.hideLoading();
		// 		}
		// 	  })
		// },
		/***
		 * 加载图片
		 */
		loadImages() {
			// this.imgArr = [];
			// this.isInitialized = true;
			//模拟请求数据
			setTimeout(()=>{
				let data = {
					page:this.page,
					pageSize:this.pageSize
				}
				hdList(data).then((res) => {
					if(res.code==200){
						this.imgArr = res.data
						console.log('this.imgArr1111111111',this.imgArr)
						if(res.data.length>0){
							this.hasMore = true
						}else{
							this.hasMore = false
						}
						for (let i = 0; i < this.imgArr.length; i++) {
							this.imgArr[i].price = this.imgArr[i].price.replace(/\.00$/, '');
							this.imgArr[i].src = this.imgArr[i].image;
						}
					}
				  })
			} ,500)
		
		},
		
		// 查询banner数据
		banner() {
			bannerList().then((res) => {
				if(res.code==200){
					for (let i = 0; i < res.data.length; i++) {
					this.imgList.push(this.url+res.data[i].image);
					} 
				}
			  })
		},
		
		// 获取会员栏数据
		memberList(){
			memberL().then((res) => {
				if(res.code==200){
					for (let i = 0; i < res.data.length; i++) {
						if(res.data[i].switch==1&&res.data[i].image){
							let temp = {
								id:res.data[i].id,
								image:this.url+res.data[i].image
							}
							this.hdbgList.push(temp);
						}
					}
				}
			  })
		},
		
		// 获取广告栏目的数据
		ggList(){
			let data = {
				isZf:"1",
				state:"1"
			}
			gethdbgList(data).then((res) => {
				if(res.code==200){
					for (let i = 0; i < res.data.length; i++) {
						this.hyGgList = res.data
					}
				}
			  })
		},
		
		// 跳转活动列表
		bindList() {
			uni.switchTab({
			url: '/pages/activity/list'
		  });
		},
		
		// 跳转商城列表
		bindShop() {
			uni.switchTab({
				url: '/pages/shop/index'
			  });
		},
		
		handleHyxq(id){
			uni.navigateTo({
				url: '../hy/xq?id='+id,
			});
		},
		
		// 跳转广告详情
		handleGgxq(id) {
			uni.navigateTo({
				url: '../hy/ggxq?id='+id,
			});
		},
		
		// getNotice(){
		// 	let data = {
		// 		num:1
		// 	}
		// 	notice(data).then((res) => {
		// 		if(res.code==200){
		// 			this.info = res.data[0]
		// 		}
		// 	})
		// },
		// 跳转appid
		handleAppid(appid){
			uni.navigateToMiniProgram({
				appId: appid, // 填入目标小程序的 appId 
				// path: 'pages/index/index', // 打开的页面路径，如果为空则打开首页
				extraData: {
						// 需要传递给目标小程序的数据
						},
				success(res) {
				        console.log("成功===========",res)
						// 打开成功的回调
						},
				fail(err) {
						console.log("失败===========",err)
						// 打开失败的回调
					    }
			});
		},
		
		handleEvent(data) {
			  this.pullUpCount = data
			  console.log('this.pullUpCount',this.pullUpCount)
			  if(this.pullUpCount>=10){
				  this.pullUpCount = true
			  }else{
				  this.pullUpCount = false
			  }
		    },
		
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if(this.pullUpCount){
				if (this.hasMore&&this.imgArr.length>0) {
				      this.page += 1;
				      this.loadImages();
				}
			}
		},
		onPullDownRefresh: function() {
			// this.num = parseInt(this.num) + 5
			// this.page = 1, // 当前页数
			setTimeout(() => {
				this.loadImages()
			    //结束下拉刷新
			    uni.stopPullDownRefresh();
		  }, 1000);
		},
	}
};
</script>

<style>
	.container{
		width: 100%;
	}
	
	.swiper{
		height: 1460rpx;
	}
	
	.swiper image{
		width: 100%;
		height: 100%;
	}
	/* 报名 */
	.enroll{
		/* padding: 10px; */
		background-color: #fff;
	}
	
	.ykTitle image{
		width: 100%;
		height: 280rpx;
	}
	
	.enroll ul{
		padding: 10px;
		display: flex;
	}
	
	.enroll ul li{
		/* border-bottom: 1px solid #f1f1f1; */
		/* height: 200rpx; */
		/* display: flex; */
		margin-bottom: 10px;
		padding-bottom: 15px;
		/* border: 1px solid red; */
		position: relative;
		background: #fff;
		width: 49%;
		box-shadow: 1px 1px 10rpx #ddd;
	}
	
	.enroll ul li:nth-child(odd){
		margin-right: 20rpx;
	}
	
	.slide-image{
		width: 100%;
		height: 440rpx;
		margin-right: 20rpx;
		position: relative;
	}
	
	.slide-image image{
		width: 100%;
		height: 100%;
		/* border-radius: 5px; */
	}
	
	.itemR{
		font-size: 11px;
		padding: 5px;
	}
	
	.title{
		font-size: 24rpx;
		margin-bottom: 5px;
		font-weight: 300;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 这里是超出几行省略 */
	}
	
	.zt{
		margin: 10px 0;
	}
	
	.zt span{
		border: 1px solid #9ebadf;
		padding: 2px 5px;
		border-radius: 20px;
		margin-right: 10px;
		color: #9ebadf;
	}
	
	.time{
		color: #8e8e8e;
		/* margin-top: -10px; */
		font-weight: 300;
		font-size: 20rpx;
	}
	
	.address{
		color: #8e8e8e;
		margin: 5px 0;
		/* margin-bottom: 5px; */
		font-weight: 300;
		font-size: 20rpx;
		display: -webkit-box;
		  -webkit-box-orient: vertical;
		  -webkit-line-clamp: 2;
		  overflow: hidden;
		  text-overflow: ellipsis;
	}
	
	.img{
		width: 40px;
		height: 40px;
		margin-top: 10px;
		position: relative;
		top: 4px;
		margin-right: 5px;
		margin-bottom: 5px;
		border-radius: 60rpx;
	}
	
	.price{
		/* font-size: 15px;
		font-weight: 600;
		float: right; */
		color: #698376;
		display: flex;
		float: left;
		font-size: 30rpx;
		font-weight: 300;
	}
	
	.price span i{
		float: right;
		color: #698376;
	}
	
	.price span:nth-child(1){
		margin-right: 20px;
	}
	
	
	.itemR{
		width: 100%;
	}
	
	.ztz{
		font-size: 20rpx;
		color: #fff;
		background: #698376;
		padding: 3px 0;
		width: 65px;
		text-align: center;
		display: inline-block;
		border-radius: 3px;
		position: absolute;
		right: 6px;
		bottom:13px;
	}
	
	.end{
		font-size: 20rpx;
		color: #fff;
		background: #ababab;
		padding: 3px 0;
		width: 65px;
		text-align: center;
		display: inline-block;
		border-radius: 3px;
		position: absolute;
		right: 6px;
		bottom:13px;
	}
	
	.my{
		font-size: 16rpx;
		color: #fff;
		background: #f4a02c;
		padding: 3px 0;
		width: 65px;
		text-align: center;
		display: inline-block;
		border-radius: 3px;
		position: absolute;
		right: 0;
		bottom:-5;
	}
	
	.nav{
		display: flex;
		font-size: 15px;
		box-shadow: 1px 1px 10px #d1d1d1;
		background-color: #fff;
		border-radius: 5px;
		margin-bottom: 10px;
		width: 95%;
		margin: 20rpx auto 0;
	}
	
	.navItem{
		width: 50%;
		text-align: center;
		padding-bottom: 15px;
		font-size: 14px;
	}
	
	.leftB{
		height: 50px;
		width: 1px;
		background-color: #698475;
		border-radius: 5px;
		margin-top: 20px;
	}
	
	.more{
		font-size: 11px;
		float: right;
		color: #979596;
		margin-top:3px;
	}
	
	.yend{
		height: 440rpx;
		background: rgba(0,0,0,0.6);
		position: absolute;
		top: 0;
		width: 97%;
		text-align: center;
		line-height: 185px;
	}
	
	.yendImg{
		width: 50px;
		height: 49px;
		position: relative;
		top: 59rpx;
	}
	
	.ggl{
		height: 45px;
		line-height: 45px;
		background: linear-gradient(to right, #8dbc90, #5b895e);
		color: #4f6851;
		font-size: 12px;
		padding: 0 10px;
		border-radius: 5px;
		margin-bottom: 10px;
		box-shadow: 1px 1px 10px #c1c1c1;
	}
	
	.hdImg{
		width: 22px;
		height: 18px;
		position: relative;
		top: 3px;
		margin-right: 5px;
	}
	
	.upHy{
		font-weight: 600;
		font-size: 13px;
	}
	
	.djlq{
		float: right;
	}
	
	.shop{
		background-color: #fff;
		border-radius: 5px;
		margin: 10px 0;
		padding: 10px;
	}
	
	.shop ul{
		display: flex;
	}
	
	.shop ul li{
		width: 50%;
		height: 380rpx;
		margin: 10px 5px;
	}
	
	.shop ul li image{
		width: 100%;
		height: 280rpx;
	}
	
	.shopPrice{
		text-align: right;
		float: right;
		color: #698475;
		margin-top: 10px;
		font-size: 15px!important;
		padding: 0 5px;
		font-weight: 300;
	}
	
	.shopText{
		width: 50px;
		padding: 5px;
		font-weight: 300;
		font-size: 24rpx;
	}
	
	.hdbg{
		width: 100%;
		height: 340rpx;
		text-align: center;
		margin:10px 0;
	}
	
	.hdbg image{
		width: 95%;
		height: 100%;
		border-radius: 5px;
	}
	
	.inventory{
		font-size: 24rpx;
		color: #c7c7c7;
		position: relative;
		top: 16rpx;
		left: 10rpx;
		font-weight: 300;
		font-size: 20rpx;
	}
	
	.swiper2 image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.swiper2{
		width: 95%;
		margin: 0 auto;
	}
	
	.hasMore{
		color: #ddd;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
	
	.gg{
		font-size: 24rpx;
		/* font-weight: 300; */
		padding: 10rpx;
		height: 32rpx;
		margin: 20rpx auto 0;
		width:91%;
		color: #698376;
	}
	
	.gg text{
		color: #698376;
		font-size: 26rpx;
		font-weight: 400;
	}
	
	.notice-container {
	    width: 100%;
		height: 100%;
	    overflow: hidden;
	    white-space: nowrap;
	    position: relative;
	  }
	  .notice-content {
	    position: absolute;
	    animation: scroll-left 15s linear infinite;
	  }
	  @keyframes scroll-left {
	    from {
	      transform: translateX(100%);
	    }
	    to {
	      transform: translateX(-100%);
	    }
	  }

</style>
